/*


*/
<template>
	<view class="visitor-page">
		<c-layout>
			<!-- 头部 -->
			<c-navigation-bar :title="followUrlData.title" @searchEvent='searchEvent' :is-search='current==0'>
			</c-navigation-bar>
			<view class="header" v-if="searchList.length==0">
				<view class="check-box">
					<!-- 	<view :class="`check-item ${current === index?'is-checked':''}`" v-for="(item,index) in typeList" :key="index"
						@click="swiperChange(index)">
						{{item.name}}
					</view> -->
					<u-tabs :list="typeList" :current="current" @change="swiperChange"></u-tabs>

				</view>
			</view>
			<!-- 好友分类列表 -->
			<view class="container-box">

				<view class="list" v-for="(item,index) in list" :key="item.id"
					:style="{display:(current==4||current==5)?'block':'flex'}">
					<view class="left">
						<u-avatar @click="goToUserInfo(item.concernId||item.userId)" size="70"
							:src='item.avatar?$u.file.getMedieUrl(item.avatar):$u.file.getMedieUrl(vuex_userDefaultTopImg)'
							mode="circle"></u-avatar>

						<view class="info">
							<view class="">
								<text class="name">{{ item.nickName }}</text>

								<view v-if="current==2||current==3" style="display: flex; align-items: center;">

			
										{{publicJS.timeZoneSwitching(item.concernTime,"M-DD")}}
									<view class="name" style="margin-left: 5px;font-size: 12px;">
										{{$t('home.careBboutYou')}}
									</view>
								</view>
								<view v-if="current==4">

						
										{{publicJS.timeZoneSwitching(item.likeTime,"hh:mm DD-MM-yyyy")}}
								</view>
								<view v-if="current==5">

			
										{{publicJS.timeZoneSwitching(item.commentTime,"hh:mm DD-MM-yyyy")}}

								</view>
							</view>

						</view>

					</view>

					<view class="right"
						:style="{display:(current==4||current==5)?'block':'flex',marginLeft:(current==4||current==5)?'55px':'0'}">
						<view class="neglectBtn" @click="Neglect(item.userId)" v-if="current==2">
							{{$t('home.Neglect')}}
						</view>
						<view class="followBtn1" @click="Follow(item.userId)" v-if="current==2||current==3">
							{{ $t('media.Follow')}}
						</view>
						<view class="followBtn1" @click="chat(item.concernId)" v-if="current==0">
							{{ $t('liveBar.chat')}}
						</view>
						<view class="followBtn"
							@click="cancelUserConcernAjax((current==0||current==2||current==3)?item.concernId:item.userId)"
							v-if="current==0||current==1">
							{{ $t('media.Followed')}}
						</view>
						<view class="name" style="margin: 20rpx 0;color: #111;font-size: 14px;font-weight: 400;" v-if="current==4">
							{{$t('home.likeVideo')}}
						</view>
						<view class="name" v-if="current==5" @click="openPop(item.videoId)"
							style="margin: 20rpx 0;  white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 100%;color: #111;font-size: 14px;font-weight: 400;">
							{{item.content}}
						</view>
						<videoCard @videoInfo="videoClick(item,index)" :key="item.id" v-if="current==4||current==5"
							style="width: 228px !important;height: 158px !important;border-radius: 15px;" :img-height="'158px'"
							:imgWidth="'100%'" :details="{...item,img:$u.appImage.getOssVideoCover(item.videoUrl)}"></videoCard>
					</view>

				</view>


				<divider v-show="total==list.length"></divider>
			</view>
			<!-- 添加好友列表 -->
			<!-- 		<view class="container-box" >


				<view class="list" v-for="item in searchList" :key="item.id">
					<view class="left">
						<u-avatar @click="goToUserInfo(item.userId)" size="102" :src='$u.file.getMedieUrl(item.avatar)'
							mode="square"></u-avatar>
						<view class="info">
							<view class="">
								<text class="name">{{ item.nickName }}</text>


							</view>

						</view>

					</view>
					<view class="right">

						<view class="followBtn1" @click="Follow(item.userId)" v-if="item.mutual==0">
							{{ $t('media.Follow')}}
						</view>


						<view class="followBtn" @click="cancelUserConcernAjax(item.userId)" v-if="item.mutual==1">
							{{ $t('media.Followed')}}
						</view>
					</view>

				</view>

			</view> -->

		</c-layout>
		<!-- 全部评论 -->
		<u-popup v-model="popShow" height="80%" mode="bottom" border-radius="50" closeable>
			<view style="margin:40rpx;">{{$t('product.SeeAllReviews')}}{{commentList.length}}</view>
			<scroll-view scroll-y="true" class="friendScrollView" @touchmove.stop lower-threshold="50">
				<view class="" v-for="(item,index) in commentList" :key="index" style="padding:0 40rpx;">
					<view class="list" style="flex-wrap: wrap;padding: 0;">
						<view class="left" style="width: 100%;">
							<u-avatar @click="goToUserInfo(item.concernId||item.userId)" size="70"
								:src='$u.file.getMedieUrl(item.avatar)' mode="square"></u-avatar>
							<view class="info" style=" padding-bottom: 20rpx;">
								<view class="">
									<view class="name" style="color: #919191;">{{ item.nickName }}</view>
					
										{{publicJS.timeZoneSwitching(item.commentTime,"DD/MM/YYYY")}}
									<view>



									</view>

								</view>

							</view>
							<view class="" @click="reply(item.commentId)" style="display: flex;align-items: baseline;">
								<u-icon name="chat" size="34"></u-icon>{{item.childComment.length}}
							</view>
						</view>
						<view class=""
							style="font-weight: 400;font-size: 15px; padding-left: 55px;word-break:break-all;color: #111;">
							{{item.content}}
						</view>

						<u-collapse style="margin-left: 55px;width: 100%;" ref="collapseView">
							<u-collapse-item :title="`${item.childComment.length}${$t('product.reply')}`" @change="clickitem">
								<view class="" v-for="(i,k) in item.childComment" :key="k">
									<view class="list">
										<view class="left">
											<u-avatar @click="goToUserInfo(i.concernId||i.userId)" size="64"
												:src='$u.file.getMedieUrl(i.avatar)' mode="square"></u-avatar>
											<view class="info">
												<view class="">
													<text class="name">{{ i.nickName }}</text>


													<view>
														<view class="name" style="font-size: 12px;margin: 20rpx 0; word-break:break-all">
															{{i.content}}
														</view>
											
										{{publicJS.timeZoneSwitching(i.commentTime,"DD/MM/YYYY")}}
													</view>
												</view>

											</view>

										</view>
										<view class="">
											<u-icon name="chat" size="34" @click="reply(item.commentId)"></u-icon>
										</view>
									</view>

								</view>

							</u-collapse-item>
						</u-collapse>

					</view>


				</view>

			</scroll-view>

		</u-popup>

		<u-popup ref="commentPopup1" duration="0" v-model="replyPop" mode="bottom" :safe-area-inset-bottom="true"
			:style="{bottom: commentPoupNotom}" class="interior-popup" border-radius="0" @close="emojiBoxShow = false">
			<view class="comment-popup-box comment-box" style="">
				<view class="comment-input">
					<textarea @click="emojiBoxShow = false" style="height: 100%;" id="edit_message_inout" class="commit-input"
						v-model="comment" :border="true" @keyboardheightchange="keyboardheightchange" :focus="inputFocus"
						:adjust-position="false" @focus="onFocus">
					</textarea>
					<view>
						<imageForSize @click="send" class="send-btn" :src="require('@/static/images/video/send.png')" size="50">
						</imageForSize>
					</view>
				</view>
				<view class="face" @touchend.prevent="openEmoji">
					<!-- <text>??</text> -->
					                   <image style="height: 58rpx; width: 58rpx;" src="@/static/svg/face.svg"/>
				</view>
			</view>
			<view class="emoji-box" :style="`height:${emojiBoxShow?300:0}rpx;padding:${emojiBoxShow?20:0}rpx`">
				<scroll-view :scroll-y="true" style="height:100%;">
					<text v-for="(item,index) in emojiList" :key="index" @touchend.prevent="addEmoji(item)">{{item.val}}</text>
				</scroll-view>
			</view>
			<view class="empty-cell" :style="`height: ${keyHeight}px;`">
			</view>
		</u-popup>
		<u-mask :show="isloading1">
			<view class="warp">
				<view class="rect" @tap.stop>
					<u-loading mode="flower"></u-loading>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import emojiList from '@/static/js/emoji.json'
	export default {
		data() {
			return {
				isloading1: false,
				//搜索
				search: {
					navThmen: 'line',
					navPlaceholder: 'Donate for',
				},
				typeList: [{
						name: this.$t('home.frendler')
					},
					{
						name: this.$t('classifySeckill.Followed')
					},
					{
						name: this.$t('home.beFocused')
					},
					{
						name: this.$t('home.Ignored')
					},
					{
						name: this.$t('storeOfInterest.BeLiked')
					},
					{
						name: this.$t('storeOfInterest.BeCommented')
					},
				],
				current: 0,
				list: [],
				followUrlData: {},
				type: 'friend',
				pagingObj: {
					pageSize: 9999,
					pageNum: 1
				},
				total: 0,
				searchList: [

				],
				user: {
					"pageSize": 999,
					"pageNum": 1,
					"startTime": "",
					"endTime": "",
					"id": "",
					"name": ""
				},

				// 查看所有评论
				popShow: false,
				commentList: [],
				replyPop: false,
				emojiBoxShow: false,
				commentPoupNotom: 0,
				emojiList,
				comment: '',
				commentId: '',
				replyId: '',
				inputFocus: false,
				keyHeight: 0
			}
		},
		onLoad(val) {

			this.getList(this.pagingObj, this.type)

		},
		methods: {
			//获取数据
			getList(pagingObj, type) {
				if (type == 'dz') {

					this.$u.post('/app/short/video/queryTheListOfLikedVideos', pagingObj).then(res => {
						this.list = res.data.records

						this.total = res.data.total

					})
				} else if (type == 'pl') {

					this.$u.post('/app/short/video/queryTheListOfCommentVideos', pagingObj).then(res => {
						this.list = res.data.records

						this.total = res.data.total
					})
				} else {
					this.$u.post('/app/user/concern/page/' + type, pagingObj).then(res => {
						if (this.current == 0) {
							this.list = res.data.records
						} else if (this.current == 2) {
							this.list = res.data.records.filter(i => {
								return i.exhibition == 1 && i.mutual == 0
							})
						} else if (this.current == 3) {
							this.list = res.data.records.filter(i => {
								return i.exhibition == 0 && i.mutual == 0
							})
						}
						this.$u.init.getUserInfo()
						this.total = res.data.total
					})
				}

			},
			//切换
			changeTabs(index) {
				this.tabsType.current = index;
				this.pagingObj.name = ''
			},
			//搜索
			searchEvent(val) {
				// this.searchList = []
				this.pagingObj.name = val
				this.swiperChange(0)
				// this.pagingObj.pageNum = 1
				// this.$u.post('/app/user/concern/page/friend', this.pagingObj).then(res => {
				// 	this.searchList = res.data.records ? res.data.records : []

				// })
			},
			// 轮播滑动后
			swiperChange(index) {
				this.list = []
				this.pagingObj.pageNum = 1
				this.current = index

				switch (this.current) {
					case 0:
						this.type = 'friend'
						this.getList(this.pagingObj, this.type)
						break;
					case 1:
						this.$u.post('/app/user/concern/page/followUser', this.user).then(res => {
							let arr = []
							res.data.records.forEach(i => {
								if (i.mutual == 0) {
									arr.push(i)
								}
							})
							this.list = arr
						})
						break;
					case 2:
						this.type = 'getFans'
						this.getList(this.pagingObj, this.type)
						this.list = this.list.filter(i => {
							i.exhibition == 1 && i.mutual == 0
						})
						break;
					case 3:
						this.type = 'getFans'
						this.getList(this.pagingObj, this.type)
						this.list = this.list.filter(i => {
							i.exhibition == 0 && i.mutual == 0
						})
						break;
					case 4:
						this.type = 'dz'
						this.getList(this.pagingObj, this.type)
						break;
					case 5:
						this.type = 'pl'
						this.getList(this.pagingObj, this.type)
						break;
					default:
						break;
				}
			},

			// 聊天
			chat(id	) {
				this.publicJS.noOpen()
				// this.$u.toast(this.$t('system.comingSoon'))
				// this.$u.route('/pages/chat/chat',{id})
			},
			// 关注
			Follow(userId) {
				this.$u.post("/app/user/concern/" + userId).then(res => {
					setTimeout(() => {
						this.$u.toast(this.$t('classifySeckill.Followed'))
						if (this.searchList.length > 0) {
							this.$u.post('/app/user/concern/page/getInteractionUser/all', this.pagingObj)
								.then(res => {
									this.searchList = res.data.records ? res.data.records : []

								})
						} else {
							this.swiperChange(this.current)
						}
					}, 100)
					this.$u.init.getUserInfo()
				})
			},
			// 取消用户关注
			cancelUserConcernAjax(id) {
				this.isloading1 = true
				this.$u.post('/app/user/concern/' + id).then(res => {
					this.$u.toast(this.$t('classifySeckill.unfollowed'))
					setTimeout(() => {
						this.isloading1 = false
						if (this.searchList.length > 0) {
							this.$u.post('/app/user/concern/page/getInteractionUser/all', this.pagingObj)
								.then(res => {
									this.searchList = res.data.records ? res.data.records : []

								})
						} else {
							this.swiperChange(this.current)
						}
					}, 100)
					this.$u.init.getUserInfo()
				})
			},
			// 忽略
			Neglect(userId) {
				this.$u.post("/app/user/concern/ignoreAttention/" + userId).then(res => {
					setTimeout(() => {
						this.swiperChange(2)
					}, 100)
				})
			},
			goToUserInfo(id) {
				uni.navigateTo({
					url: '/pages/user/components/userInfo?userId=' + id
				})
			},
			// 短视频点击
			videoClick(item, index) {
				this.$u.vuex('vuex_video_record', {
					list: this.list,
					index: index,
					show: true
				})
				uni.navigateTo({
					url: "/pages/public/recordVideo/recordVideo",
					"animationType": "slide-in-right",
					"animationDuration": 300
				})
			},
			// 查看评论
			openPop(id) {
				this.popShow = true
				this.commentId = id

				let that = this
				this.$u.post("/app/short/video/viewCommentsBasedOnVideoId/" + id, {
					"pageSize": 9999,
					"pageNum": 1,
				}).then(res => {
					this.commentList = res.data.records

				})
			},
			reply(id) {
				this.replyId = id
				this.replyPop = true
				this.$refs.commentPopup1.open()
				// uni.onKeyboardHeightChange(res => {
				// 	this.commentPoupNotom = '200px'
				// })
			},
			clickitem() {
				let long = this.$refs.collapseView.length;
				setTimeout(() => {
					for (let i = 0; i < long; i++) {
						this.$refs.collapseView[i].init(); // 计算高度
					}


				}, 20);

			},
			// 打开表情
			openEmoji() {
				this.emojiBoxShow = !this.emojiBoxShow
				if (this.emojiBoxShow) {
					this.hideKeyboard()
					uni.getSelectedTextRange({
						success: res => {
							console.log('getSelectedTextRange res', res.start, res.end)
							this.rangIndex = res.start
						}
					})
					// const input = document.querySelector('#edit_message_inout textarea')
					// 获取光标位置
					// this.rangIndex = this.getPosition(input)
				}
			},
			//  隐藏键盘
			hideKeyboard() {
				uni.hideKeyboard()
			},
			addEmoji(data) {
				const emo = data.val
				// 判断光标是否在末尾
				const state = this.comment.length === this.rangIndex
				this.comment = this.insertStr(this.comment, this.rangIndex, emo)
				this.rangIndex = this.rangIndex + emo.length
				// // 新光标位置应该在添加表情后的位置，表情才会向后方添加
				// const newRangIndex = this.rangIndex + emo.length
				// this.$nextTick(()=>input.setSelectionRange(newRangIndex, newRangIndex))
			},
			// 根据原字符 开始位置  新的字符 插入后返回新的
			insertStr(source, start, newStr) {
				return source.slice(0, start) + newStr + source.slice(start)
			},
			getPosition(element) {
				let cursorPos = 0;
				// IE浏览器
				if (document.selection) {
					var selectRange = document.selection.createRange();
					selectRange.moveStart('character', -element.value.length);
					cursorPos = selectRange.text.length;
				} else if (element.selectionStart || element.selectionStart == '0') {
					cursorPos = element.selectionStart;
				}
				return cursorPos;
			},

			send() {
				if (!this.comment) return
				let obj = {
					videoId: parseInt(this.commentId),
					parentId: this.replyId,
					comment: this.comment
				}
				let that = this
				this.$u.post("/app/short/video/comments", obj).then(res => {
					this.openPop(this.commentId)
					this.replyPop = false
					this.comment = ''
					let long = that.$refs.collapseView.length;
					setTimeout(() => {
						for (let i = 0; i < long; i++) {
							that.$refs.collapseView[i].init(); // 计算高度
						}


					}, 20);
				})

			},
			onFocus() {
				console.log('聚焦1111');
				this.emojiBoxShow = false
			},
			keyboardheightchange(e) {
				console.log(e, 'eeeee');
				if (e.detail.height < 10) {
					// if (!this.emojiShow) {
					// 	this.focusStatus = false
					// 	this.replyComment = {}
					// }
					this.inputFocus = false
					this.keyHeight = e.detail.height
					// this.focusStatus = false
				} else {
					this.emojiBoxShow = false
					this.keyHeight = e.detail.height
				}
			},
		},
		onReachBottom() {
			if (this.list.length == this.total) {
				return
			}
			this.pagingObj.pageNum += 1
			this.getList(this.pagingObj, this.type)
		},

	}
</script>

<style lang="scss" scoped>
	.visitor-page {
		.container-box {
			height: 82vh;
			overflow: auto;
		}

		.title {
			color: #1B1D29;
			font-size: 30rpx;
			padding: 36rpx 0;
		}

		.group {
			display: flex;
			justify-content: space-between;
			margin-bottom: 30rpx;
			overflow-y: scroll;

			.person {
				text-align: center;
				margin-right: 40rpx;

				uni-text {
					font-size: 26rpx;
					margin-top: 15rpx;
				}
			}
		}

		.header {
			margin-bottom: 20px;

			.check-box {

				.check-item {
					flex: 1;
					height: 60rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #ACB1C0;
					transition: .2s;

					&.is-checked {
						color: rgb(41, 52, 208);
					}
				}
			}
		}

		.list {
			display: flex;
			width: 100%;
			justify-content: space-between;
			font-size: 11px;
			color: #91909A;
			margin-bottom: 15px;
			padding-bottom: 15px;
			position: relative;
			align-items: center;

			.left {
				display: flex;
				width: calc(100% - 96rpx);

				.info {
					margin-left: 38rpx;
					width: calc(100% - 160rpx);
					display: flex;
					align-items: center;

					.name {
						font-size: 15px;
						font-family: HarmonyOS Sans SC-Bold, HarmonyOS Sans SC;
						font-weight: 700;
						color: #111118;
						display: block;
						margin-bottom: 8rpx;
					}

				}
			}

			.right {
				display: flex;

				/deep/ uni-image {
					box-sizing: border-box;
					border-radius: 15px !important;
				
				}

				.neglectBtn {
					width: 60px;
					height: 29px;
					border-radius: 4px;
					line-height: 29px;
					text-align: center;
					background: rgba(242, 242, 242, 1);
					color: rgba(182, 182, 182, 1);
				}

				.followBtn1 {
					width: 60px;
					height: 29px;
					border-radius: 4px;
					line-height: 29px;
					text-align: center;
					background-color: #2934D0;
					color: #fff;
					margin: 0 16rpx;
				}

				.followBtn {
					width: 60px;
					height: 29px;
					border-radius: 4px;
					line-height: 29px;
					text-align: center;
					background: rgb(252, 61, 92);
					color: #fff;
					margin: 0 16rpx;
				}
			}

			.flex-bottom {
				position: absolute;
				right: 0;
				bottom: 0;
			}
		}




	}

	.interior-popup {
		/deep/ .uni-scroll-view {
			// padding-bottom: 50rpx;
		}

		.friendScrollView {
			height: 500rpx;
			padding-top: 20rpx;

			.comment {
				display: flex;
				padding: 30rpx 46rpx;
				justify-content: space-between;
			}

			.no-commit {
				width: 100%;
				height: 500rpx;
				font-size: 40rpx;
				color: #ccc;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	/deep/ .u-drawer-content {
		border-radius: 60rpx 60rpx 0 0;
	}

	.comment-box {
		bottom: 0;
		background: #F8F8F8;
		padding: 40rpx 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.comment-input {
			flex: auto;
			border: 2rpx solid #1B1D29 !important;
			border-radius: 20rpx;
			display: flex;
			height: 120rpx;
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			display: flex;
			width: 340rpx;

			textarea {
				flex: auto;
			}

			>view {
				display: flex;
				align-items: center;
			}

			.send-btn {
				padding-right: 10rpx;
			}
		}

		.commit-input {
			border: none;

			/deep/ .u-input__right-icon {
				display: none;
			}

			.uni-textarea-wrapper {
				display: flex;
				align-items: center;
			}

			.uni-textarea-placeholder {
				color: #1B1D29 !important;
			}
		}

		.face {
			font-size: 50rpx;
			width: 112rpx;
			height: 116rpx;
			border-radius: 20rpx;
			border: 2rpx solid #1B1D29;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 30rpx;
		}
	}

	.emoji-box {
		transition: 0.3s;
		width: 100%;
		height: 300rpx;
		padding: 20rpx;
		font-size: 64rpx;
	}

	.friendScrollView {
		height: 70vh;
		padding-top: 20rpx;


	}

	/deep/ .u-collapse-head {
		width: 100px;
		height: 50px;
		font-size: 12px;
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
</style>